<template>
	<view class="index-content">
		<TopBar :indexflag="true" :combakflag="false" :lang="true" :bottom="true" title="DikiDiki"
			barstyle="background-color:rgba(0,0,0,0)"></TopBar>
		<HeaderTitle title="DikiDiki" :bottom="true" :lang="true" :mobile="true"></HeaderTitle>
		<Address style="margin-top: 20rpx;"></Address>
		<scroll-view scroll-y="true" class="scroll" :dir="i18nLocale=='ug'?'rtl':''">
			<view class="char-image" v-if="swiperList.length" dir="ltr" >
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					indicator-active-color="#15c45b"   style="width:100%;height:100%">
					<swiper-item  v-for="item in swiperList" style="width:100%;height:100%;border-radius: 30rpx;" @click="changeSwiper(item.id)">
						<view class="swiper-item">
							<image :src="getImgSrc(item.src)"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="card-title"> <text class="bar"></text>{{$t('ListShops')}}</view>
			<u-empty v-if="shopList.length==0" style="padding-top: 100rpx;"  mode="favor" :text="$t('EmptyShops')"
				iconSize="100" textSize="14">
			</u-empty>
			<view class="shop-item" v-if="shopList.length!=0" v-for="(item,index) in shopList" @click="changeshop(item.id)">
				<view class="left">
					<view class="image-box">
						<image :src="getImgSrc(item.logo)" mode=""></image>
						<view class="off-text" v-if="!item.status" >{{$t('Closed')}}</view>
					</view>
					<view class="shop-content">
						<view class="title">{{i18nLocale=='ug'?item.ug_name:item.cn_name}}</view>
						<view class="sub-title">
							<text class="">{{$t('Sold')}}: 999 </text>
							<text class=""> {{$t('Evaluate')}}: 10</text>
						</view>
						<view class="star">
							<u-rate :count="count" readonly active-color="#ffa902" gutter="1" inactive-color="#b2b2b2"
								v-model="value"></u-rate>
								<view class="right" v-if="topId" >{{item.distance>=1?item.distance.toFixed(2)+'km':item.distance.toFixed(2)*1000+'m'}}</view>
								<view class="right" v-if="!topId" >{{$t('Neighborhood')}}</view>
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
			<Loading :show="loadshow" :text="$t('Loading')"></Loading>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import Address from "@/components/Address.vue"
	import HeaderTitle from "@/components/HeaderTitle.vue"
	import {
		getshops,
		getswipers
	} from '@/api/all.js';
	export default {
		components: {
			TopBar,
			HeaderTitle,
			Address
		},
		mounted() {
			this.getSwipers();
			this.getShops();
		},

		data() {
			return {
				acnav: 0,
				loadshow: false,
				count: 5,
				value: 5,
				swiperList: [],
				shopList: []
			}
		},
		watch: {
			"$store.state.top_id": function(val, oldval) {
				this.getShops();
			}
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
			topId(){
				return this.$store.state.top_id;
			}
		},
		methods: {
			//获取商铺
			getShops() {
				this.loadshow=true;
				getshops({
					top_id: this.$store.state.top_id
				}).then(res => {
					let data = res.body.data;
					this.shopList = data.map(item=>({
						...item,
						distance:this.distance(
						item.location[0],
						item.location[1],
						this.$store.state.location[0],
						this.$store.state.location[1]
					)
					}));					
					this.loadshow=false;
				})
			},
			//获取轮播图
			getSwipers(){
				getswipers({}).then(res => {
					if(res.code==200){
						this.swiperList=res.body.data;
						// console.log(res,'++++++++++++')
					}
				})
			},
			//点击轮播图
			changeSwiper(id){
				uni.navigateTo({
					url:'/pages/index/swipercontent?id='+id
				})
			},
			//点击商铺
			changeshop(id) {
				uni.navigateTo({
					url: '/pages/index/shopindex?id=' + id
				})
			},
			// 两点间距离
			distance(la1, lo1, la2, lo2) {
				var La1 = (la1 * Math.PI) / 180.0
				var La2 = (la2 * Math.PI) / 180.0
				var La3 = La1 - La2
				var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
				var s = 2 * Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(La3 / 2), 2) +
						Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
					)
				)
				s = s * 6378.137 //地球半径
				s = Math.round(s * 10000) / 10000
				return s;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0rpx $uni-spacing-padding-sm;
		.scroll {
			width: 100%;
			height: calc(100% - 212rpx);
			box-sizing: border-box;

			.char-image {
				width: 100%;
				height: 300rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.swiper-item {
					width: 100%;
					height: 100%;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: $uni-border-radius-lg;
				}
			}

			.card-title {
				font-size: $uni-font-size-base;
				color: $uni-color-title;
				margin-top: $uni-spacing-padding-sm;
				padding: 10rpx 0rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.bar {
					width: 15rpx;
					height: 40rpx;
					background-color: $uni-color-topic;
					border-radius: 20rpx;
					margin: 0rpx 10rpx;
				}
			}

			.shop-item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				background-color: $uni-bg-color-box;
				border-radius: $uni-border-radius-base;
				box-shadow: $uni-bg-shadow;
				margin-top: 30rpx;
				padding: $uni-spacing-padding-sm;

				.left {
					display: flex;
					align-items: center;
					.image-box{
						position: relative;
						width: 200rpx;
						height: 200rpx;
						image {
							width:100%;
							height:100%;
							border-radius: $uni-border-radius-lg;
							position: absolute;
						}
						.off-text{
							color:#fff;
							font-size: $uni-font-size-base;
							width:100%;
							height:100%;
							position: absolute;
							border-radius: $uni-border-radius-lg;
							z-index:99;
							top:0%;
							left:0%;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: rgba(0,0,0,0.4);
						}
					}
					.shop-content {
						height: 200rpx;
						box-sizing: border-box;
						padding: 20rpx;

						.title {
							color: $uni-color-title;
							font-size: $uni-font-size-base;
						}

						.sub-title {
							color: $uni-text-color-grey;
							font-size: $uni-font-size-sm0;
							display: flex;
							box-sizing: border-box;
							text{
								padding:0rpx 30rpx;
							}

						}
						.star{
							display: flex;
							align-items: center;
							justify-content: space-between;
							pointer-events: none;
						}
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
				}

				.right {
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm1;
				}
			}
		}



	}
</style>